<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="导用url/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="导用url/font-awesome.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="导用url/bootstrap.min.js"></script>
    <style>
        .rttr{
                height: 30px;
                background-color: green;

        }
    </style>
</head>
<body>
    <div class="col-md-8 col-md-offset-2">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
              <li data-target="#carousel-example-generic" data-slide-to="0" class=""></li>
              <li data-target="#carousel-example-generic" data-slide-to="1" class="active"></li>
              <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner" role="listbox">
              <div class="item">
                <img data-src="holder.js/1140x500/auto/#777:#555/text:First slide" alt="First slide [1140x500]" src="" data-holder-rendered="true">
              </div>
              <div class="item active">
                <img data-src="holder.js/1140x500/auto/#666:#444/text:Second slide" alt="Second slide [1140x500]" src="" data-holder-rendered="true">
              </div>
              <div class="item">
                <img data-src="holder.js/1140x500/auto/#555:#333/text:Third slide" alt="Third slide [1140x500]" src="" data-holder-rendered="true">
              </div>
            </div>
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
              <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
              <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
            </a>
          </div>
    </div>
    <div class="col-md-8 col-md-offset-2"> 
        <a class="btn btn-default" href="path/to/settings" aria-label="Settings">
            <i class="fa fa-cog" aria-hidden="true"></i>
          </a>
          
          <a class="btn btn-danger" href="path/to/settings" aria-label="Delete">
            <i class="fa fa-trash-o" aria-hidden="true"></i>
          </a>
          
          <a class="btn btn-primary" href="#navigation-main" aria-label="Skip to main navigation">
            <i class="fa fa-bars" aria-hidden="true"></i>
          </a>
          <i class="fa fa-refresh fa-spin fa-3x fa-fw" aria-hidden="true"></i>
          <span class="sr-only">Refreshing...</span>
          
          <i class="fa fa-cog fa-spin fa-3x fa-fw" aria-hidden="true"></i>
          <span class="sr-only">Saving. Hang tight!</span>
          <div class="input-group margin-bottom-sm">
            <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw" aria-hidden="true"></i></span>
            <input class="form-control" type="text" placeholder="您的邮箱地址">
          </div>
          <div class="input-group">
            <span class="input-group-addon"><i class="fa fa-key fa-fw" aria-hidden="true"></i></span>
            <input class="form-control" type="password" placeholder="请输入密码">
          </div>
          <a href="path/to/shopping/cart" class="btn btn-primary" aria-label="View 3 items in your shopping cart">
            <i class="fa fa-shopping-cart" aria-hidden="true"></i>
          </a>
          <i class="fa fa-battery-half" aria-hidden="true"></i>
          <span class="sr-only">Battery level: 50%</span>
    </div>
    
</body>
</html>